<template>
  <div class="fill">
    <div class="me">
      <h3>我</h3>
      <img src="/img/设置.png" alt />
    </div>
    <div class="me-list">
      <p>开始准备好好吃饭</p>
      <p>
        登录即表明你同意《
        <a href="#">用户协议</a>》和《
        <a href="#">隐私政策</a>》
      </p>
    </div>
    <Button />
  </div>
</template>

<script>
import Button from '../components/button/button.vue'
export default {
  components: {
    Button
  }
};
</script>

<style scope>
.me {
  width: 100%;
  position: relative;
}
h3 {
  font-size: 1rem;
  margin-top: 0.625rem;
  display: inline-block;
  margin-left: 47%;
}
.me img {
  display: inline-block;
  width: 1.5625rem;
  height: 1.5625rem;
  position: absolute;
  right: 0.625rem;
  top: 0.625rem;
}
.me-list{
    width: 100%;
}
.me-list p:nth-child(1){
    margin-top: 3.125rem;
    margin-left: 10%;
    font-size: 1.25rem;
    font-weight: bold;
}
.me-list p:nth-child(2){
    margin-top: .3125rem;
    margin-left: 15%;
}
.me-list a{
    text-decoration: underline;
}
</style>